<template>
  <div class="chart-container app-container nohead">
    <!-- <el-button @click="setOptionss">切换</el-button> -->
    <div id="chart" style="height: 490px; margin-top: 30px"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import resize from "@/views/extend/graphDemo/mixins/resize";
export default {
  name: "extend-graphDemo-echartsBar",
  mixins: [resize],
  data() {
    return {
      chart: null,
      option: {
        color: ["#1890ff"],
        title: {
          text: "单位(份)",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["近30天新增合同"],
          // 各大区回款总额
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "东北大区",
              "西南大区",
              "华北大区",
              "西北大区",
              "华南大区",
              "华中大区",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "近30天新增合同",
            type: "bar",
            data: [3, 5, 9, 1, 0, 12],
            barWidth: 80,
          },
        ],
      },
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    init(option) {
      this.option = option;
      this.initChart();
    },
    initChart() {
      this.chart = echarts.init(document.getElementById("chart"));
      this.chart.setOption(this.option);
    },
  },
};
// import echarts from "echarts";
// import resize from "../mixins/resize";
// export default {
//   name: "extend-graphDemo-echartsBar",
//   mixins: [resize],
//   data() {
//     return {
//       chart: null,
//       option: {
//         title: {
//           text: "堆叠分类",
//         },
//         tooltip: {
//           trigger: "axis",
//           axisPointer: {
//             // 坐标轴指示器，坐标轴触发有效
//             type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
//           },
//         },
//         toolbox: {
//           show: true,
//           orient: "vertical",
//           left: "right",
//           top: "center",
//           feature: {
//             mark: { show: true },
//             dataView: { show: true, readOnly: false },
//             magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
//             restore: { show: true },
//             saveAsImage: { show: true },
//           },
//         },
//         legend: {
//           data: [
//             "直接访问",
//             "邮件营销",
//             "联盟广告",
//             "视频广告",
//             "搜索引擎",
//             "百度",
//             "谷歌",
//             "必应",
//             "其他",
//           ],
//         },
//         grid: {
//           left: "3%",
//           right: "4%",
//           bottom: "3%",
//           containLabel: true,
//         },
//         xAxis: [
//           {
//             type: "category",
//             data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
//           },
//         ],
//         yAxis: [
//           {
//             type: "value",
//           },
//         ],
//         series: [
//           {
//             name: "直接访问",
//             type: "bar",
//             data: [320, 332, 301, 334, 390, 330, 320],
//           },
//           {
//             name: "邮件营销",
//             type: "bar",
//             stack: "广告",
//             data: [120, 132, 101, 134, 90, 230, 210],
//           },
//           {
//             name: "联盟广告",
//             type: "bar",
//             stack: "广告",
//             data: [220, 182, 191, 234, 290, 330, 310],
//           },
//           {
//             name: "视频广告",
//             type: "bar",
//             stack: "广告",
//             data: [150, 232, 201, 154, 190, 330, 410],
//           },
//           {
//             name: "搜索引擎",
//             type: "bar",
//             data: [862, 1018, 964, 1026, 1679, 1600, 1570],
//             markLine: {
//               lineStyle: {
//                 normal: {
//                   type: "dashed",
//                   color: "linear",
//                 },
//               },
//               data: [[{ type: "min" }, { type: "max" }]],
//             },
//           },
//           {
//             name: "百度",
//             type: "bar",
//             //barWidth: 5,
//             stack: "搜索引擎",
//             data: [620, 732, 701, 734, 1090, 1130, 1120],
//           },
//           {
//             name: "谷歌",
//             type: "bar",
//             stack: "搜索引擎",
//             data: [120, 132, 101, 134, 290, 230, 220],
//           },
//           {
//             name: "必应",
//             type: "bar",
//             stack: "搜索引擎",
//             data: [60, 72, 71, 74, 190, 130, 110],
//           },
//           {
//             name: "其他",
//             type: "bar",
//             stack: "搜索引擎",
//             data: [62, 82, 91, 84, 109, 110, 120],
//           },
//         ],
//       },
//     };
//   },
//   mounted() {
//     this.initChart();
//   },
//   beforeDestroy() {
//     if (!this.chart) {
//       return;
//     }
//     this.chart.dispose();
//     this.chart = null;
//   },
//   methods: {
//     initChart() {
//       this.chart = echarts.init(document.getElementById("chart"));
//       this.chart.setOption(this.option);
//     },
//   },
// };
</script>
